{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}
    我的网站|首页
{% endblock %}
{% block header_extends %}
    <link rel="stylesheet" href="{% static "css/home.css"%}">
    <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
{% endblock %} 
{% block nav_home_active%}
active
{% endblock%}
{% block content %}
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="{% static 'header_bg.png'%}" alt="First slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="{% static 'header_bg.png'%}" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="{% static 'header_bg.png'%}" alt="Third slide">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
    <div class="hot-data">
        <blockquote class="home-content blockquote text-center">
            <p class="mb-0">有时候如果你爱一个人，就要当一个陌生人。</p>
            <footer class="blockquote-footer">----- <cite title="Source Title">《银翼杀手2049》</cite></footer>
        </blockquote>
        <div id="container" ></div>
        <div class="box-main">
        <div class="card-deck box1">  
                <div class="card">
                        <div class="card-body">
                            <h5 class="card-title text-center">今天热门点击文章</h5>
                            <p class="card-text">            
                                <ul class="list-inline">
                                    {% for hot_data in today_hot_data %}
                                        <li class=" text-secondary d-flex justify-content-between align-items-center"><a class="card-link" href="{% url 'blog_detail' hot_data.content_object.pk %}">{{ hot_data.content_object.title}}</a><span class="badge badge-primary badge-pill">{{ hot_data.read_num}}</span></li>
                                        
                                    {%empty%}
                                        <li>今天没有热门博客</li>
                                    {%endfor%}
                                </ul>
                            </p>
                        </div>
                </div> 
            
            <div class="card">
                    <div class="card-body">
                        <h5 class="card-title text-center">昨天热门点击文章</h5>
                        <p class="card-text">            
                            <ul class="list-inline">
                                {% for hot_data in yesterday_hot_data %}
                                <li class=" d-flex justify-content-between align-items-center"><a class="card-link" href="{% url 'blog_detail' hot_data.content_object.pk %}">{{ hot_data.content_object.title}}</a><span class="badge badge-primary badge-pill">{{ hot_data.read_num}}</span></li>    
                                {%empty%}
                                    <li>昨天没有热门博客</li>
                                {%endfor%}
                            </ul>
                        </p>
                    </div>
            </div> 

            <div class="card" >
                    <div class="card-body">
                        <h5 class="card-title text-center">一周热门点击文章</h5>
                        <p class="card-text">            
                            <ul class="list-inline">
                                {% for hot_blog in hot_blogs_for_7_days %}
                                    <li class=" d-flex justify-content-between align-items-center"><a class="card-link" href="{% url 'blog_detail' hot_blog.id %}">{{hot_blog.title}}</a><span class="badge badge-primary badge-pill">{{ hot_blog.read_num_sum}}</span></li>    
                                {%empty%}
                                    <li>一周内没有热门博客</li>
                                {%endfor%}
                            </ul>
                        </p>
                    </div>
            </div> 
        </div>
        </div>
    </div>

    <script>
        // 图表配置
        var options = {
            chart: {type: 'line'},
            title: {text: null},
            xAxis: {
                categories: {{dates|safe}},
                tickmarkPlacement: 'on',
                title:{text:'七日阅读量变化'}
            },
            yAxis: {
                title: {text: null },
                labels:{enabled:false},
                gridLineDashStyle:'Dash',
            },
            series: [{                              // 数据列
                name: '阅读量',                        // 数据列名
                data:{{ read_nums }}
            }],
            plotOptions:{
                line:{
                    dateLabels:{
                        enabled:true
                    }
                }
            },
            legend : {enabled:false},
            credits : {enabled:false},
        
        };
        // 图表初始化函数
        var chart = Highcharts.chart('container', options);
    </script>
    <div class="ahah" style="height:300px"></div>
    <div class="lianxi text-center text-white">   
        <h5>联系我们：</h5>
        <h5><i class="fa fa-qq" aria-hidden="true">QQ：1406816741</i>&nbsp;&nbsp;
        <i class="fa fa-weixin" aria-hidden="true">微信：gpf_weiyi</i>&nbsp;&nbsp;
        <a class="text-white"href="https://github.com/zhio"><i class="fa fa-github" aria-hidden="true">Github</i></a></h5> 
    </div>
    <footer class=" footer2 sticky-bottom ">
            <p class="text-center text-white">©2018 www.zhio.club. All rights reserved.</p>

    </footer>   
    
{% endblock %}
